@(repository: gitbucket.core.service.RepositoryService.RepositoryInfo,
  content: String,
  enableWikiLink: Boolean,
  enableRefsLink: Boolean,
  enableLineBreaks: Boolean,
  enableTaskList: Boolean,
  hasWritePermission: Boolean,
  completionContext: String,
  style: String = "",
  styleClass: String = "",
  placeholder: String = "Leave a comment",
  ariaLabel: String = "Comment body",
  elastic: Boolean = false,
  focus: Boolean = false,
  tabIndex: Int = -2,
  uid: Long = new java.util.Date().getTime())(implicit context: gitbucket.core.controller.Context)
@import gitbucket.core.view.helpers
<div class="tabbable">
  <ul class="nav nav-tabs fill-width" style="margin-bottom: 10px;">
    <li class="active"><a href="#tab@uid" data-toggle="tab" id="write@uid">Write</a></li>
    <li><a href="#tab@(uid + 1)" data-toggle="tab" id="preview@uid">Preview</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" style="margin-top: 4px;" id="tab@uid">
      <span id="error-content" class="error"></span>
      @textarea = {
        <textarea id="content@uid" class="form-control" name="content" placeholder="@placeholder" style="resize: vertical; @style" aria-label="@ariaLabel"
          @if(tabIndex > -2){ tabindex="@tabIndex"}
          @if(styleClass.nonEmpty){ class="@styleClass" }>@content</textarea>
      }
      @gitbucket.core.helper.html.attached(
        repository        = repository,
        completionContext = completionContext,
        generateScript    = !enableWikiLink
      )(textarea)
    </div>
    <div class="tab-pane" id="tab@(uid + 1)">
      <div class="markdown-body" id="preview-area@uid">
      </div>
    </div>
  </div>
</div>
<script>
$(function(){
  @if(elastic){
    $('#content@uid').elastic();
    $('#content@uid').trigger('blur');
  }
  @if(focus){
    $('#content@uid').trigger('focus');
  }

  $('#write@uid').on('shown.bs.tab', function(){
    $('#content@uid').trigger('focus');
  });

  $('#preview@uid').click(function(){
    $('#preview-area@uid').html('<img src="@helpers.assets("/common/images/indicator.gif")"> Previewing...');
    $.post('@helpers.url(repository)/_preview', {
      content          : $('#content@uid').val(),
      enableWikiLink   : @enableWikiLink,
      enableRefsLink   : @enableRefsLink,
      enableLineBreaks : @enableLineBreaks,
      enableTaskList   : @enableTaskList
    }, function(data){
      $('#preview-area@uid').html(data);
      $('#preview-area@uid input').prop('disabled', true);
      prettyPrint();
    });
  });
});
</script>
